<template>
    <div class="wrap">
      <div class="login">
        <h1 class="tc mb20 fn f20">注册</h1>
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
          class="demo-ruleForm" status-icon>
          
          <el-form-item label="用户名" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入" prefix-icon="User" />
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input show-password v-model="ruleForm.password" placeholder="请输入" prefix-icon="Lock" />
          </el-form-item>
          <el-form-item label="确认密码" prop="cpassword">
            <el-input show-password v-model="ruleForm.cpassword" placeholder="请输入" prefix-icon="Lock" />
          </el-form-item>
          <!-- 验证码 -->
          <!-- <el-form-item label="验证码" prop="code">
            <div class="code">
              <el-input v-model="ruleForm.code" placeholder="请输入" prefix-icon="Odometer" />
              <img class="ml5" :src="captchaSrc" alt="" @click="refreshImage">
            </div>
  
          </el-form-item> -->
  
          <!-- <el-form-item label="&nbsp;">
            <el-checkbox-group v-model="ruleForm.remember">
              <el-checkbox value="1" name="type">记住密码</el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
  
          <el-form-item>
            <el-button size="large" style="width: 40%;" type="primary" @click="submitForm(ruleFormRef)">注 册</el-button>
            <el-button size="large" style="width: 40%;" type="primary" @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <p class="info tc">Copyright &copy; 2018-2024 ruoyi.vip All Rights Reserved.</p>
  </template>
  
  <script setup>
  import { onMounted, reactive, ref } from 'vue'
  import { ElMessage } from 'element-plus'
  import { useRouter } from 'vue-router'
  import axios from 'axios'
  const formLabelWidth = '140px'
  
  const cancel = () => {
    router.replace('/login');
  }
  
  const router = useRouter();
  
  
  const ruleFormRef = ref()
  const ruleForm = reactive({
    username: '',
    password: '',
    cpassword: ''
  })
  
  //去注册
  const toRegistration = () => {
    router.replace('/registration'); 
  }
  
  
  const rules = reactive({
    username: [
      { required: true, message: '不许为空', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '不许为空', trigger: 'blur' }
    ],
    cpassword: [
      { required: true, message: '不许为空', trigger: 'blur' }
    ]
  })
  
  const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        // console.log('submit!')
        // console.log({...ruleForm});
        if(ruleForm.password!=ruleForm.cpassword){
          ElMessage({
            message: '两次密码不一致！',
            type: 'warning',
          })
          return;
        }
        //调用后端登录接口
        axios.post('/SystemUser/register', {
         
            userName: ruleForm.username,
            password: ruleForm.password
          
        }).then(res => {
          // console.log(res);
          let result = res.data;
        //   if (result.code == 1) {
        //     // 全局保存登录的用户信息和token值
        //     localStorage.setItem('userInfo', JSON.stringify(result.data));
        //     localStorage.setItem('token', result.msg);
  
            ElMessage({
              message: '注册成功！',
              type: 'success',
            })
            router.replace('/login');
        //   } else {
        //     ElMessage({
        //       message: result.msg,
        //       type: 'warning',
        //     })
        //   }
        })
      } else {
        console.log('error submit!', fields)
        ElMessage({
          message: '注册失败！',
          type: 'warning',
        })
      }
    })
  }
  onMounted(() => {
    //获取验证码信息
    // getImage()
  })
  //点击刷新图片
//   const refreshImage = () => {
//     getImage()
//   }
//   //验证码图片
//   const captchaSrc = ref('')
//   //验证码值
//   const captchaCode = ref('')
//   const getImage = () => {
//     axios.get('/validateCode/generateValidateCode').then(res => {
//       // console.log(res.data.data.codeValue);
//       captchaSrc.value = res.data.data.codeValue
//       captchaCode.value = res.data.data.codeKey
//       // console.log(captchaSrc.value);
//       // console.log(captchaCode.value);
//     })
//   }
  </script>
  
  <style scoped>
  .wrap {
    height: 100vh;
    background-color: pink;
    background-image: url(@/assets/imgs/login-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login {
    width: 400px;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
  }
  
  .code {
    display: flex;
    height: 36px;
  }
  
  .info {
    position: fixed;
    width: 100%;
    bottom: 10px;
    left: 0;
    color: #fff;
  }
  </style>